<!--  -->
<template>
  <div class="container grid">
    <div class="area1 itemBg">
      <div class="font f18 c-7c medium areaTitle">项目概况</div>
      <div class="con">
        <div class="list">
          <span class="title">项目地址</span>
          <span class="context">河北省廊坊市阿达哒哒哒</span>
        </div>
        <div class="list">
          <span class="title">项目地址</span>
          <span class="context">河北省廊坊市阿达哒哒哒</span>
        </div>
        <div class="list">
          <span class="title">项目地址</span>
          <span class="context">河北省廊坊市阿达哒哒哒</span>
        </div>
        <div class="list">
          <span class="title">项目地址</span>
          <span class="context">河北省廊坊市阿达哒哒哒</span>
        </div>
        <div class="list">
          <span class="title">项目地址</span>
          <span class="context">河北省廊坊市阿达哒哒哒</span>
        </div>
      </div>
    </div>
    <div class="area2">
      <img class="containImg" src="@/assets/image/3d.jpeg" alt="" />
    </div>
    <div class="area3 itemBg">
      <div class="font f18 c-7c medium areaTitle">预报警信息</div>
      <div class="con">
        <div class="list">
          <span class="context">1.三句话华南有限公司/钢筋班/周德明</span>
          <span class="context">昨日未出门刷卡</span>
        </div>
        <div class="list">
          <span class="context">1.河北省廊坊市阿达哒哒哒</span>
        </div>
        <div class="list">
          <span class="context">1.河北省廊坊市阿达哒哒哒</span>
        </div>
      </div>
    </div>
    <div class="area4 itemBg">
      <div class="font f18 c-7c medium areaTitle">人员管理</div>
      <PersonManage />
    </div>
    <div class="area5 itemBg">
      <div class="font f18 c-7c medium areaTitle">电箱管理</div>
      <ElectricBox />
    </div>
    <div class="area6 itemBg">
      <div class="font f18 c-7c medium areaTitle">塔吊管理</div>
      <TowerCrane />
    </div>
    <div class="area7 itemBg">
      <div class="font f18 c-7c medium areaTitle">环境管理</div>
      <Environment />
    </div>
    <div class="area8 itemBg">
      <div class="font f18 c-7c medium areaTitle">质量管理</div>
      <Quality/>
    </div>
    <div class="area9 itemBg">
      <div class="font f18 c-7c medium areaTitle">车辆管理</div>
      <Car/>
    </div>
  </div>
</template>

<script>
import PersonManage from "./components/homeArea4.vue";
import ElectricBox from "./components/homeArea5.vue";
import TowerCrane from "./components/homeArea6.vue";
import Environment from "./components/homeArea7.vue";
import Quality from './components/homeArea8.vue';
import Car from './components/homeArea9.vue';
export default {
  name: "index",
  data() {
    return {
      customColor: "#1a6aa4",
    };
  },
  components: { PersonManage, ElectricBox, TowerCrane, Environment , Quality , Car},
};
</script>
<style scoped lang="scss">
.container {
  width: 100%;
  padding: 0 20px;
  height: 936px;
  box-sizing: border-box;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  grid-template-areas:
    "area1 area2 area2 area3"
    "area4 area2 area2 area5"
    "area6 area7 area8 area9";
  gap: 20px;
  .area1 {
    .con {
      .list {
        height: 28px;
        .title {
          padding: 0 20px;
          font-size: 14px;
          color: rgb(130, 130, 130);
          //   background-color:#1a6aa4 ;
        }
        .context {
          color: rgb(211, 211, 211);
        }
      }
    }
  }
  .area3 {
    .con {
      width: 430px;
      margin: 0 auto;
      .list {
        height: 28px;
        display: flex;
        justify-content: space-between;
        .context {
          
          font-size: 14px;
          color: rgb(211, 211, 211);
        }
      }
    }
  }
}
.mainImg {
  height: calc(100% - 50px);
}
</style>